@extends('homeLayouts.master')

@push('css')
    <link rel="stylesheet" type="text/css" href="{{asset('org/home/css')}}/ziy.css">
@endpush
@section('content')
<div id="myCart" v-clock="">
    <div v-if="cart.length">
        <div class="beij_center">
            <div class="cart-main-header clearfix">
                <div class="cart-col-1">
                    <input type="checkbox" class="jdcheckbox" v-model="allCheck" @change="changeAll()">
                </div>
                <div class="cart-col-2">全选</div><!-- $page.site 主站 团购 抢购   style -->
                <div class="cart-col-3">商品信息</div>
                <div class="cart-col-4">
                    <div class="cart-good-real-price">单价</div>
                </div>
                <div class="cart-col-5">数量</div>
                <div class="cart-col-6">
                    <div class="cart-good-amount">小计</div>
                </div>
                <div class="cart-col-7">操作</div>
            </div>
        </div>
        <div class="container">
                <div class="cart-shop-goods dangq_honh" v-for="(v,k) in cart">
                    <div class="cart-shop-good">
                        <div class="cart-col-1">
                            <input type="checkbox" class="jdcheckbox" v-model="v.status" @change="checkStatus(v)">
                        </div>
                        <div class="cart-col-2" style="height: 82px;">
                            <a href="" target="_blank" class="g-img"><img :src="v.goods.pics[0]" alt=""></a>
                        </div>
                        <div class="fl houj_c">
                            <div class="cart-dfsg"><div class="cart-good-name"><a href="#" target="_blank">@{{ v.goods.name }}</a></div></div>
                            <div class="cart-good-pro"></div>
                            <div class="cart-col-4"><div class="cart-good-real-price "><!--主品-->¥@{{ v.goods.price }}</div><div class="red"></div></div>
                            <div class="cart-col-5">
                                <div class="gui-count cart-count" >
                                    <a href="" @click.prevent="minus(v)" class="gui-count-btn gui-count-sub gui-count-disabled">-</a>
                                    <a href="" @click.prevent="plus(v)" class="gui-count-btn gui-count-add">+</a>
                                    <div class="gui-count-input"><input dytest=""  class="" type="text" :value="v.num"></div>
                                </div>
                            </div>
                            <div class="cart-col-6 ">
                                <div class="cart-good-amount">@{{ v.xiaoji }}</div>
                            </div>
                        </div>
                        <div class="cart-col-7">
                            <div class="cart-good-fun delfixed">
                                <a href="#" @click.prevent="del(k,v.id)">删除</a>
                            </div>
                            <div class="cart-good-fun">
                                <a href="#">移入收藏夹</a>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
        <div class="jies_beij">
            <div class="beij_center over_dis">
                <div class="cart-col-1 cart_jies">
                    <input type="checkbox" class="jdcheckbox" v-model="allCheck" @change="changeAll">
                </div>
                <div class="qianm_shanc_yvf">
                    <span>全选</span>
                    <a href="#" @click.prevent="deleteMany(ids)">删除</a>
                </div>
                <div class="jies_ann_bei">
                    <p>已选 <em>@{{ cart.length }}</em> 件商品 总计（不含运费）：<span>￥@{{ total }}</span></p>
                    <a href="" @click.prevent="jiesuan()" class="order_btn">去结算</a>
                </div>
            </div>
        </div>
    </div>
    <div v-if="!cart.length">

        <div class="container">
            <div class="cart-empty">
                <div class="message">
                    <ul>
                        <li class="txt">
                            购物车内暂时没有商品!<a href="/" class="ftx-05">
                                去购物 &gt;
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
</div>

    <script>
        new Vue({
            el:'#myCart',
            data:{
                cart:{!! $newcarts !!},
                allCheck:false,    //全选状态
            },
            computed:{
                // 计算总价
                total(){
                    var total=0;
                    this.cart.forEach((v)=>{
                        if(v.status){
                            total+=v.goods.price * v.num
                        }
                    });
                    return total;
                }


            },
            mounted(){
                this.initgoods()
            },
            methods:{
                // 去支付
                jiesuan(){
                    var ids=''
                    var total=0;
                    this.cart.forEach((v)=>{
                        if(v.status){
                            ids=v.id+','
                            total+=v.goods.price*v.num
                        }
                    })
                    ids=ids.substr(0,ids.length-1)
                    if(ids){
                        location.href='/cart/jiesuan/'+ids+'/'+total;
                    }else{
                        swal(
                            '',
                            '请至少选中一件商品',
                            'error'
                        )
                    }
                },



                initgoods(){
                    var newCart = [];
                    this.cart.forEach((v)=>{
                        // 计算小计
                        v.xiaoji=v.goods.price*v.num;
                        // 设置每条购物车的选中状态
                        v.status=v.status?v.status:false;
                        // 将每条循环的购物数据存入newCart
                        newCart.push(v)
                    })
                    this.cart=newCart;
                },

                // 增加商品数量
                plus(v){
                    // 发送异步请求到后台修改购物车表中的商品数量
                    axios.get('/cart/changeNum/plus/'+v.id).then((res)=>{
                        if(res.data.valid){
                            v.num++;
                            this.initgoods()
                        }else{
                            swal(
                                '',
                                res.data.message,
                                'error'
                            )
                        }
                    })
                },
                // 减少商品数量
                minus(v){
                    if(v.num>1){
                        // 发送异步请求
                        axios.get('/cart/changeNum/minus/'+v.id).then((res)=>{
                            if(res.data.valid){
                                v.num--;
                                this.initgoods()
                            }else{
                                swal(
                                    '',
                                    res.data.message,
                                    'error'
                                )
                            }
                        })
                    }
                },

                // 点击单个商品数据的时候,判断是否所有的都已经选中了
                checkStatus(v){
                    this.initgoods();
                    var status=[];
                    this.cart.forEach((v)=>{
                        status.push(v.status?1:0)
                    })
                    if(status.indexOf(0)==-1){
                        this.allCheck=true
                    }else{
                        this.allCheck=false
                    }
                },
                // 点击全选复选框
                changeAll(){
                    this.cart.forEach((v)=>{
                        v.status=this.allCheck
                    })
                    this.initgoods()
                },
                // 删除选中商品
                del(k,id){
                    var This = this;
                    swal({
                        title: '确定删除吗？',
                        text: '你将无法恢复它！',
                        type: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: '确定删除！',
                    }).then(function (type) {
                        if (type.value) {
                            axios.get('/cart/deleteCart/' + id).then((res) => {
                                if (res.data.valid) {
                                    // 将当前对应的购物车数据删除
                                    This.cart.splice(k, 1);
                                    swal(
                                        '',
                                        res.data.message,
                                        'success'
                                    );
                                }
                            })
                        }
                    })
                },
                // 批量删除商品
                deleteMany() {
                    var ids=''
                    this.cart.forEach((v,k)=>{
                        if(v.status){
                            ids+=v.id+','
                        }
                    })
                    // 删除末尾的逗号
                    ids=ids.substr(0,ids.lebgth-1)
                    location.href='/cart/deleteMany/'+ids;
                }

            }


        })
    </script>




    <div class="beij_center">
        <div class="investment_f">
            <div class="investment_title">
                <div class="ds_dg on_d">为您推荐</div>
                <div class="ds_dg">最近预览</div>
            </div>
            <div class="investment_con">
                <!---->
                <div class="picScroll_left_s"  style="display: block;">
                    <div class="hd">
                        <a class="next next_you"></a>
                        <ul></ul>
                        <a class="prev prev_zuo"></a>
                    </div>
                    <div class="bd">
                        <ul class="picList">
                            <li>
                                <div class="pic"><a href="#" target="_blank"><img src="{{asset('org/home/images')}}/lieb_tupi3.jpg" /></a></div>
                                <div class="title">
                                    <a href="#" target="_blank">喜芬妮春秋桑蚕丝长袖性感蕾丝花边女式睡衣家居服二</a>
                                    <div class="jiage_gouw"><span>¥2499.00</span></div>
                                    <a href="#" class="cart_scroll_btn">加入购物车</a>
                                </div>
                            </li>
                            <li>
                                <div class="pic"><a href="#" target="_blank"><img src="{{asset('org/home/images')}}/shangq_3.jpg" /></a></div>
                                <div class="title">
                                    <a href="#" target="_blank">喜芬妮春秋桑蚕丝长袖性感蕾丝花边女式睡衣家居服二</a>
                                    <div class="jiage_gouw"><span>¥2499.00</span></div>
                                    <a href="#" class="cart_scroll_btn">加入购物车</a>
                                </div>
                            </li>
                            <li>
                                <div class="pic"><a href="#" target="_blank"><img src="{{asset('org/home/images')}}/big_3.jpg" /></a></div>
                                <div class="title">
                                    <a href="#" target="_blank">喜芬妮春秋桑蚕丝长袖性感蕾丝花边女式睡衣家居服二</a>
                                    <div class="jiage_gouw"><span>¥2499.00</span></div>
                                    <a href="#" class="cart_scroll_btn">加入购物车</a>
                                </div>
                            </li>
                            <li>
                                <div class="pic"><a href="#" target="_blank"><img src="{{asset('org/home/images')}}/xiangqtu_1.jpg" /></a></div>
                                <div class="title">
                                    <a href="#" target="_blank">喜芬妮春秋桑蚕丝长袖性感蕾丝花边女式睡衣家居服二</a>
                                    <div class="jiage_gouw"><span>¥2499.00</span></div>
                                    <a href="#" class="cart_scroll_btn">加入购物车</a>
                                </div>
                            </li>
                            <li>
                                <div class="pic"><a href="#" target="_blank"><img src="{{asset('org/home/images')}}/lieb_tupi3.jpg" /></a></div>
                                <div class="title">
                                    <a href="#" target="_blank">喜芬妮春秋桑蚕丝长袖性感蕾丝花边女式睡衣家居服二</a>
                                    <div class="jiage_gouw"><span>¥2499.00</span></div>
                                    <a href="#" class="cart_scroll_btn">加入购物车</a>
                                </div>
                            </li>
                            <li>
                                <div class="pic"><a href="#" target="_blank"><img src="{{asset('org/home/images')}}/big_3.jpg" /></a></div>
                                <div class="title">
                                    <a href="#" target="_blank">喜芬妮春秋桑蚕丝长袖性感蕾丝花边女式睡衣家居服二</a>
                                    <div class="jiage_gouw"><span>¥2499.00</span></div>
                                    <a href="#" class="cart_scroll_btn">加入购物车</a>
                                </div>
                            </li>
                            <li>
                                <div class="pic"><a href="#" target="_blank"><img src="{{asset('org/home/images')}}/lieb_tupi1.jpg" /></a></div>
                                <div class="title">
                                    <a href="#" target="_blank">喜芬妮春秋桑蚕丝长袖性感蕾丝花边女式睡衣家居服二</a>
                                    <div class="jiage_gouw"><span>¥2499.00</span></div>
                                    <a href="#" class="cart_scroll_btn">加入购物车</a>
                                </div>
                            </li>
                            <li>
                                <div class="pic"><a href="#" target="_blank"><img src="{{asset('org/home/images')}}/lieb_tupi2.jpg" /></a></div>
                                <div class="title">
                                    <a href="#" target="_blank">喜芬妮春秋桑蚕丝长袖性感蕾丝花边女式睡衣家居服二</a>
                                    <div class="jiage_gouw"><span>¥2499.00</span></div>
                                    <a href="#" class="cart_scroll_btn">加入购物车</a>
                                </div>
                            </li>
                            <li>
                                <div class="pic"><a href="#" target="_blank"><img src="{{asset('org/home/images')}}/lieb_tupi3.jpg" /></a></div>
                                <div class="title">
                                    <a href="#" target="_blank">喜芬妮春秋桑蚕丝长袖性感蕾丝花边女式睡衣家居服二</a>
                                    <div class="jiage_gouw"><span>¥2499.00</span></div>
                                    <a href="#" class="cart_scroll_btn">加入购物车</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <!---->
                <div class="picScroll_left_s" style="display: none;">
                    <div class="picScroll_left_s_dsl">
                        <div class="dfgc">
                            <ul class="picList">
                                <li>
                                    <div class="pic"><a href="#" target="_blank"><img src="{{asset('org/home/images')}}/lieb_tupi3.jpg" /></a></div>
                                    <div class="title">
                                        <a href="#" target="_blank">喜芬妮春秋桑蚕丝长袖性感蕾丝花边女式睡衣家居服二</a>
                                        <div class="jiage_gouw"><span>¥2499.00</span></div>
                                        <a href="#" class="cart_scroll_btn">加入购物车</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="pic"><a href="#" target="_blank"><img src="{{asset('org/home/images')}}/big_3.jpg" /></a></div>
                                    <div class="title">
                                        <a href="#" target="_blank">喜芬妮春秋桑蚕丝长袖性感蕾丝花边女式睡衣家居服二</a>
                                        <div class="jiage_gouw"><span>¥2499.00</span></div>
                                        <a href="#" class="cart_scroll_btn">加入购物车</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="pic"><a href="#" target="_blank"><img src="{{asset('org/home/images')}}/lieb_tupi1.jpg" /></a></div>
                                    <div class="title">
                                        <a href="#" target="_blank">喜芬妮春秋桑蚕丝长袖性感蕾丝花边女式睡衣家居服二</a>
                                        <div class="jiage_gouw"><span>¥2499.00</span></div>
                                        <a href="#" class="cart_scroll_btn">加入购物车</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="pic"><a href="#" target="_blank"><img src="{{asset('org/home/images')}}/big_3.jpg" /></a></div>
                                    <div class="title">
                                        <a href="#" target="_blank">喜芬妮春秋桑蚕丝长袖性感蕾丝花边女式睡衣家居服二</a>
                                        <div class="jiage_gouw"><span>¥2499.00</span></div>
                                        <a href="#" class="cart_scroll_btn">加入购物车</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="pic"><a href="#" target="_blank"><img src="{{asset('org/home/images')}}/shangq_3.jpg"></a></div>
                                    <div class="title">
                                        <a href="#" target="_blank">喜芬妮春秋桑蚕丝长袖性感蕾丝花边女式睡衣家居服二</a>
                                        <div class="jiage_gouw"><span>¥2499.00</span></div>
                                        <a href="#" class="cart_scroll_btn">加入购物车</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="pic"><a href="#" target="_blank"><img src="{{asset('org/home/images')}}/shangq_3.jpg"></a></div>
                                    <div class="title">
                                        <a href="#" target="_blank">喜芬妮春秋桑蚕丝长袖性感蕾丝花边女式睡衣家居服二</a>
                                        <div class="jiage_gouw"><span>¥2499.00</span></div>
                                        <a href="#" class="cart_scroll_btn">加入购物车</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script type="text/javascript">
        $(function(){

            /*tab标签切换*/
            function tabs(tabTit,on,tabCon){
                $(tabCon).each(function(){
                    $(this).children().eq(0).show();

                });
                $(tabTit).each(function(){
                    $(this).children().eq(0).addClass(on);
                });
                $(tabTit).children().click(function(){
                    $(this).addClass(on).siblings().removeClass(on);
                    var index = $(tabTit).children().index(this);
                    $(tabCon).children().eq(index).show().siblings().hide();
                });
            }
            tabs(".investment_title","on_d",".investment_con");

        })
    </script>
    <script type="text/javascript">
        jQuery(".picScroll_left_s").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:"left",autoPlay:true,vis:5,trigger:"click"});
    </script>
@endsection



